JavaScript Structured Data

Visualizing `ArrayBuffer`, `SharedArrayBuffer`, `DataView`, `Atomics`, and `JSON`.

ArrayBuffer

A global object used to represent a generic, fixed-length raw binary data buffer. It's a non-resizable container for bytes and cannot be directly manipulated. Instead, you use a "view" like a `TypedArray` or `DataView` to read and write its contents.

const buffer = new ArrayBuffer(8); // 8 bytes
const view = new Int32Array(buffer); // A view over the buffer

An `ArrayBuffer` is a blank block of memory. It needs a tool (`DataView`) to interact with it.

ArrayBuffer (8 bytes):

SharedArrayBuffer

Similar to `ArrayBuffer`, but it can be shared between multiple web workers and the main thread. This allows for parallel processing with direct memory access, requiring the use of `Atomics` for safe, synchronized operations.

const shared = new SharedArrayBuffer(4);
const view = new Int32Array(shared);
// Pass 'shared' to a worker using postMessage()

A `SharedArrayBuffer` is a public whiteboard that multiple people (threads) can read and write to at the same time.

Main Thread: 0

Worker Thread: 0

DataView

A low-level interface that provides a getter and setter API for reading and writing multiple number types in an `ArrayBuffer` at any byte offset, regardless of the platform's endianness.

const buffer = new ArrayBuffer(8);
const view = new DataView(buffer);
view.setInt16(0, 257); // Sets 2 bytes

A `DataView` lets you slice and dice the raw bytes of an `ArrayBuffer` as different types, like looking at the same puzzle from different angles.

Byte Offset

Value

Method

.setUint8()

.setInt16()

Atomics

A set of static methods that provide thread-safe, low-level operations on `SharedArrayBuffer` objects. They prevent race conditions by ensuring that a single operation (like adding a value) completes entirely before another thread can access the same memory location.

const buffer = new SharedArrayBuffer(4);
const view = new Int32Array(buffer);
Atomics.add(view, 0, 10);

Atomics act as a traffic controller for shared memory. They ensure that operations don't collide, preventing inconsistent data.

Worker 1: Current Value: 0

Worker 2: Current Value: 0

JSON

A built-in object that provides methods for working with JSON (JavaScript Object Notation), a lightweight data-interchange format. `JSON.parse()` converts a JSON string into a JavaScript object, and `JSON.stringify()` converts an object into a JSON string.

const obj = { name: 'Alice', age: 30 };
const jsonString = JSON.stringify(obj);

The `JSON` object is a translator. It converts JavaScript objects into a universally readable text format, and back again.

JavaScript Object:

Result: